<template>
	<view class="container">
		<view class="carditem" v-for="(item, key) in list" :key="key" @click="itemtap(item)">
			<view class="ddh u-flex u-flex-between">
				<view class="u-line-1" style="flex: 1;">{{$z.$t("订单编号")}}：{{ item.ddh }}</view>
				<u-button type="primary" v-if="item.b_end == 1" text="已完成" style="width: auto; margin: 0"
					size="mini"></u-button>
				<u-button v-else type="success" text="进行中" style="width: auto; margin: 0" size="mini"></u-button>
			</view>
			<view class="sj u-flex u-flex-between">
				<view>{{$z.$t("充电时间")}}</view>
				<view>{{ item.cdsjc || item.sjc }}</view>
			</view>
			<view class="sj u-flex u-flex-between">
				<view>{{$z.$t("站点名称")}}</view>
				<view>{{ item.mc }}</view>
			</view>
			<view class="je u-flex">
				<view class="u-flex" style="align-items: flex-end">
					<view class="">{{$z.$t("金额")}}</view>
					<text class="text">￥{{ item.je / 100 }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import qs from "qs"
	export default {
		components: {},
		data() {
			return {
				list: [],
				ddh: ''
			};
		},
		computed: {
			reqdata() {
				let r = {}
				r.uUser = this.$store.state.user.USearch.uUser
				return r;
			},
		},

		onLoad(query) {
			// this.ddh = query.ddh
			console.log('query', query);
			this.getdata(query.ddh)
		},
		methods: {

			async getdata(ddh) {
				// 1. 获取 ChargeUserDsToUser 数据
				let ChargeUserDsToUser = await this.$z.request("/ChargeUserDsToUser", {
					ddhds: ddh
				});
				console.log('ChargeUserDsToUser', ChargeUserDsToUser);

				// 2. 提取所有 ddh
				const ddhs = ChargeUserDsToUser.map(item => item.ddh);

				// 3. 遍历每个 ddh，请求 /GetRfCD
				let allResults = [];
				for (let ddh of ddhs) {
					let reqdata = {
						...this.reqdata,
						ddh: ddh // 将当前 ddh 添加到请求参数中
					};
					let GetRfCD = await this.$z.request("/GetRfCD", reqdata);
					allResults = allResults.concat(GetRfCD); // 将结果拼接到 allResults 中
				}

				// 4. 更新列表和状态
				this.list = this.list.concat(allResults);
				this.status = allResults.length >= this.reqdata.cmax ? "loadmore" : "nomore";
			},
			itemtap(item) {
				if (item.b_end != 1) {
					uni.navigateTo({
						url: `/pages/ChargeUser/ChargeUser`
					})
				} else {
					uni.navigateTo({
						url: `/pages/order/components/components/placeholderOrderDetails?${qs.stringify(item)}`
					})
				}

			},
		},
	};
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		// height: 100vh;
		background-color: #f4f7f8;
		padding: 30rpx;
	}

	.carditem {
		background: #fff;
		margin-bottom: 30rpx;
		border-radius: 10rpx;

		.ddh {
			height: 100rpx;
			font-size: 30rpx;
			position: relative;
			padding: 0 30rpx;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}
		}

		.sj {
			height: 80rpx;
			font-size: 28rpx;
			position: relative;
			padding: 0 30rpx;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}
		}

		.je {
			height: 120rpx;
			justify-content: flex-end;
			padding: 0 30rpx;
			font-size: 24rpx;

			.text {
				font-size: 36rpx;
				font-weight: bold;
				color: #2093f5;
			}
		}
	}
</style>